'use client'
import Image from 'next/image'
import Link from 'next/link'
import { useEffect, useState } from 'react'
import { ROUTE_SETTINGS } from '@/config/settings'
import { Settings } from 'lucide-react'
import IconButton from '@/components/common/IconButton'

export default function UserInfo({ userInfo }) {
  const [permissions, setPermission] = useState([]);
  useEffect(() => {
    let getPermissions = userInfo?.roleInfo?.permissions
    if (getPermissions?.length === 0) return setPermission([]);
    getPermissions = getPermissions?.map(item => item.path);
    setPermission(getPermissions);
  }, [userInfo?.roleInfo?.permissions]);
  return (
    <div className=' bg-white px-4 py-4 rounded-sm overflow-hidden'>
      <div className='flex flex-col gap-2'>
        <div className='flex justify-between items-start'>
          {userInfo?.avatar && <Image src={userInfo.avatar} alt='avatar' width={50} height={50} className='rounded-full w-12 h-12cheng' />}
          {permissions?.includes(ROUTE_SETTINGS) && <IconButton className='w-9! h-9!'><Link className='w-full h-full flex justify-center items-center font-normal text-gray-600' href={ROUTE_SETTINGS}><Settings color="#ffffff" /></Link></IconButton>}
        </div>
        {userInfo?.nickname && <p className='text-sm text-black'>昵称: {userInfo.nickname}<span className='text-red-500 font-bold text-sm'>（{userInfo.roleInfo.name}）</span></p>}
        {userInfo?.username && <h2 className='text-sm text-black block leading-[1.1]'>用户名: {userInfo.username}</h2>}
        {userInfo?.mobile && <p className='text-sm text-black block leading-[1.1]'>联系方式: {userInfo.mobile}</p>}
        {userInfo?.email && <p className='text-sm text-black block leading-[1.1] pb-1.5'>邮箱: {userInfo.email}</p>}
      </div>
    </div>
  )
}
